Google Charts API এর সাহায্যে একটি সিম্পল চার্ট তৈরি করা খুবই সহজ। এখানে আমরা একটি সাধারণ Pie Chart তৈরি করব এবং Angular অ্যাপ্লিকেশনে সেটি প্রদর্শন করব। ধাপে ধাপে পুরো প্রক্রিয়া বর্ণনা করা হলো।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি ইতিমধ্যে থাকে, তাহলে সেটি ব্যবহার করতে পারেন):
ng new google-charts-demo
cd google-charts-demo
Google Charts লাইব্রেরি ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এর জন্য নিচের কমান্ডটি ব্যবহার করুন:
npm install angular-google-charts
এটি ইন্সটল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
এখন, GoogleChartsModule আপনার Angular অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এর জন্য app.module.ts ফাইলে নিম্নলিখিত কোডটি যোগ করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন, আমরা একটি Pie Chart তৈরি করব। app.component.ts ফাইলে ডেটা এবং অপশন কনফিগার করতে হবে।
app.component.ts:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Simple Google Chart Example';
chartType = 'PieChart'; // Chart Type
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Chart Data
chartOptions = {
title: 'My Daily Activities', // Title
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400
}; // Chart Options
}
এখন, app.component.html ফাইলে চার্ট রেন্ডার করতে হবে। এখানে আমরা google-chart কম্পোনেন্ট ব্যবহার করব।
app.component.html:<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখন, Angular অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Pie Chart দেখতে পারবেন।
এই প্রক্রিয়াতে আমরা একটি সিম্পল Pie Chart তৈরি করেছি এবং Angular অ্যাপে সেটি ইন্টিগ্রেট করেছি। আমরা angular-google-charts লাইব্রেরি ব্যবহার করে সহজে Google Charts এর মাধ্যমে ডেটা ভিজুয়ালাইজেশন তৈরি করেছি। ChartOptions এবং chartData কাস্টমাইজ করে আপনি যে কোনো ধরনের চার্ট তৈরি করতে পারেন। Google Charts API এর সাহায্যে আপনি ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড চার্ট তৈরি করতে পারবেন।
Google Charts ব্যবহার করে প্রথমবারের মতো একটি সিম্পল চার্ট তৈরি করা খুবই সহজ। নিচে ধাপে ধাপে প্রক্রিয়া বর্ণনা করা হলো যাতে আপনি Angular অ্যাপ্লিকেশন ব্যবহার করে প্রথম Google Chart তৈরি করতে পারেন।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন)।
ng new google-charts-demo
cd google-charts-demo
Google Charts API ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। ইন্সটল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:
npm install angular-google-charts
এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
এখন, Angular অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করতে app.module.ts ফাইলে এটি ইমপোর্ট করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন, আমরা একটি Pie Chart তৈরি করব। এটি করার জন্য, app.component.ts ফাইলে ডেটা এবং অপশন কনফিগার করতে হবে।
app.component.ts ফাইল:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'First Google Chart';
// Chart Type: Pie Chart
chartType = 'PieChart';
// Chart Data: ডেটার একটি অ্যারে তৈরি করুন
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
// Chart Options: কাস্টম অপশন সেট করুন
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut style (0.4 means hole size)
width: 600,
height: 400
};
}
এখানে, chartType হলো 'PieChart', এবং chartData হলো একটি অ্যারে যা বিভিন্ন তথ্য প্রদর্শন করবে। chartOptions দিয়ে চার্টের বিভিন্ন কাস্টমাইজেশন সেট করা হয়েছে, যেমন title, pieHole (ডোঘনাট স্টাইলের জন্য), এবং চার্টের width এবং height।
এখন, app.component.html ফাইলে Google Chart রেন্ডার করার জন্য নিচের কোডটি যোগ করুন:
app.component.html ফাইল:<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে, google-chart কম্পোনেন্ট ব্যবহার করে আমরা আমাদের Pie Chart রেন্ডার করেছি।
এখন Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি আপনার প্রথম Google Pie Chart দেখতে পাবেন।
এভাবে, আমরা Angular এর মধ্যে Google Charts ব্যবহার করে একটি সিম্পল Pie Chart তৈরি করেছি। angular-google-charts লাইব্রেরি ব্যবহার করে আপনি সহজেই Google Charts API ইন্টিগ্রেট করতে পারেন এবং ডেটার ভিজুয়ালাইজেশন করতে পারেন। এই প্রক্রিয়াতে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারবেন, যেমন Line Chart, Bar Chart, Area Chart, Pie Chart ইত্যাদি।
Google Charts API ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটা বাইন্ডিংয়ের মাধ্যমে চার্টে প্রদর্শিত তথ্য পরিচালনা করতে পারেন। এখানে আমরা Chart Type এবং Data Binding এর ভূমিকা এবং কিভাবে এগুলি ব্যবহার করতে হয় তা আলোচনা করব।
Google Charts API-এ Chart Type দ্বারা আপনি যে ধরনের চার্ট তৈরি করবেন তা নির্ধারণ করা হয়। বিভিন্ন ধরনের চার্ট বিভিন্ন প্রয়োজনে ব্যবহার করা হয়। এখানে কিছু জনপ্রিয় Chart Types দেওয়া হলো:
Pie Chart মূলত ডেটার একটি অংশের তুলনা দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত শতাংশের ভিত্তিতে ডেটা দেখায়।
chartType = 'PieChart';
Bar Chart সাধারণত বিভিন্ন ক্যাটেগরি বা গ্রুপের মধ্যে তুলনা করতে ব্যবহৃত হয়, যেখানে প্রতিটি ক্যাটেগরি একটি বার দ্বারা উপস্থাপিত হয়।
chartType = 'BarChart';
Line Chart সাধারণত সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা প্রদর্শনের জন্য ব্যবহৃত হয়।
chartType = 'LineChart';
Column Chart Bar Chart এর মতো, তবে এটি প্রতিটি তুলনা কলামের আকারে প্রদর্শিত হয়।
chartType = 'ColumnChart';
Area Chart লাইন চার্টের মতো, তবে এখানে লাইনটির নিচের অংশ রঙিন থাকে এবং একটি ভলিউমের ধারণা দেয়।
chartType = 'AreaChart';
Combo Chart একাধিক চার্টের সংমিশ্রণ হতে পারে। যেমন একটি চার্টে বার এবং লাইন একসাথে প্রদর্শন করা হয়।
chartType = 'ComboChart';
Bubble Chart প্রতিটি ডেটা পয়েন্টকে একটি বুদ্বুদ দ্বারা উপস্থাপন করে, যেখানে বুদ্বুদটির আকার এবং রঙ অতিরিক্ত ডেটা বা পরিমাপ তুলে ধরে।
chartType = 'BubbleChart';
Gantt Chart প্রজেক্ট ম্যানেজমেন্ট এবং সময়সূচী প্রদর্শনের জন্য ব্যবহৃত হয়।
chartType = 'Gantt';
Data Binding একটি প্রক্রিয়া যা ডেটা এবং ইউআই (User Interface) এর মধ্যে যোগাযোগ তৈরি করে। Angular এর মাধ্যমে Google Charts এর ডেটা বাইন্ডিং খুবই সহজ। Google Charts API তে Data Binding এর মাধ্যমে আপনি ডেটা এবং চার্টের মধ্যে সম্পর্ক স্থাপন করতে পারেন। Angular এ ডেটা বাইন্ডিংয়ের মাধ্যমে ডেটা পরিবর্তন হলে তা চার্টে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।
ধরা যাক, আমরা একটি Pie Chart তৈরি করছি, যেখানে ডেটা chartData অ্যারে থেকে আসে এবং আমাদের chartType এবং chartOptions কাস্টমাইজ করা থাকে।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts with Data Binding';
// Chart Type
chartType = 'PieChart';
// Chart Data (ডেটা বাইন্ডিং)
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
// Chart Options (কাস্টম অপশন)
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut style
width: 600,
height: 400
};
// ডেটা পরিবর্তন করার ফাংশন
updateChartData() {
this.chartData = [
['Task', 'Hours per Day'],
['Work', 6],
['Eat', 3],
['Commute', 2],
['Watch TV', 1],
['Sleep', 12]
];
}
}
<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
<!-- একটি বাটন যা ডেটা আপডেট করবে -->
<button (click)="updateChartData()">Update Chart Data</button>
এখানে, chartData হচ্ছে যে ডেটা চার্টে প্রদর্শিত হবে, এবং chartType ও chartOptions হচ্ছে চার্টের কাস্টমাইজেশন।
যখন updateChartData() ফাংশনটি কল করা হবে, তখন chartData অ্যারে পরিবর্তন হবে এবং নতুন ডেটা চার্টে স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে।
One-way Data Binding: ডেটা শুধুমাত্র একদিকে প্রবাহিত হয় (যেমন: কম্পোনেন্ট থেকে টেমপ্লেটে)।
উদাহরণ:
<h1>{{ title }}</h1>
Two-way Data Binding: ডেটা দুটি দিকে প্রবাহিত হয় (কম্পোনেন্ট থেকে টেমপ্লেটে এবং টেমপ্লেট থেকে কম্পোনেন্টে)।
উদাহরণ:
<input [(ngModel)]="title">
Angular তে ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি ডেটা পরিবর্তন করে তা সোজা চার্টে রিফ্লেক্ট করতে পারেন। যেমন একটি বোতাম ক্লিকের মাধ্যমে ডেটা পরিবর্তন করা:
updateChartData() {
this.chartData = [
['Task', 'Hours per Day'],
['Work', 6],
['Eat', 3],
['Commute', 2],
['Watch TV', 1],
['Sleep', 12]
];
}
এটি করলে, Pie Chart-এ স্বয়ংক্রিয়ভাবে নতুন ডেটা প্রদর্শিত হবে।
Chart Type এবং Data Binding এর মাধ্যমে আপনি Google Charts API তে বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটাকে সহজেই পরিবর্তন করে তা চার্টে প্রতিফলিত করতে পারেন। Angular এর ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি কম্পোনেন্টের ডেটা পরিবর্তন করলে তা স্বয়ংক্রিয়ভাবে টেমপ্লেটে এবং চার্টে প্রদর্শিত হয়। এটি ডেটা ভিজুয়ালাইজেশনের জন্য অত্যন্ত কার্যকরী এবং ইন্টারঅ্যাকটিভ উপায়।
Google Charts API ব্যবহার করে ডেটা ভিজুয়ালাইজেশন করতে DataTable এবং arrayToDataTable দুটি গুরুত্বপূর্ণ কনসেপ্ট রয়েছে। এগুলি Google Charts-এ ডেটা সঞ্চয় এবং প্রদর্শনের জন্য ব্যবহৃত হয়।
DataTable হলো Google Charts এর একটি ডেটা স্ট্রাকচার যা চার্টে ব্যবহৃত ডেটা সংগঠিত এবং ব্যবস্থাপনা করার জন্য ডিজাইন করা হয়েছে। এটি একটি টেবিলের মতো, যেখানে রো (পঙক্তি) এবং কলাম থাকে, এবং আপনি ডেটাকে বিভিন্ন ধরনের ফরম্যাটে পরিচালনা করতে পারেন।
Google Charts API-তে, DataTable ব্যবহার করে আপনি ডেটার স্ট্রাকচার নির্ধারণ করতে পারেন, এবং এটি চার্ট তৈরির জন্য প্রয়োজনীয় ডেটা হিসেবে ব্যবহৃত হয়।
arrayToDataTable একটি ফাংশন যা JavaScript অ্যারে (Array) থেকে DataTable তৈরি করে। এটি সাধারণত ডেটাকে array আকারে নিয়ে তা DataTable ফরম্যাটে রূপান্তর করার জন্য ব্যবহৃত হয়। এই ফাংশনটি Google Charts এর google.visualization.arrayToDataTable() এর মাধ্যমে ডেটা কোয়ালিটি এবং মান ঠিকঠাক রেখে DataTable তে রূপান্তর করতে সাহায্য করে।
arrayToDataTable ফাংশনটি একটি সাধারণ অ্যারে গ্রহণ করে এবং তা একটি Google Chart এর জন্য DataTable এ রূপান্তর করে। এটি চারটি গুরুত্বপূর্ণ পদক্ষেপ অনুসরণ করে:
ধরা যাক, আমরা একটি Pie Chart তৈরি করতে চাই, যেখানে কিছু সাধারণ তথ্য থাকবে। আমরা অ্যারে (Array) আকারে ডেটা দেব এবং তা arrayToDataTable ফাংশনের মাধ্যমে DataTable এ রূপান্তর করব।
app.component.ts ফাইল:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts - DataTable Example';
// Chart Type: Pie Chart
chartType = 'PieChart';
// Chart Data (এটি অ্যারে আকারে ডেটা)
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
// Chart Options
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400
};
}
app.component.html ফাইল:<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে, chartData একটি অ্যারে হিসেবে ডেটা প্রদান করা হয়েছে। এই ডেটা আমরা arrayToDataTable ফাংশন ব্যবহার করে Google Chart DataTable এ রূপান্তর করব।
যদিও আমাদের উদাহরণে সরাসরি অ্যারে ব্যবহার করা হয়েছে, যদি আপনি google.visualization.arrayToDataTable() ব্যবহার করতে চান, তাহলে এটি এমনভাবে দেখতে হবে:
google.charts.load('current', {'packages':['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
এখানে, arrayToDataTable ফাংশনটি অ্যারে ডেটা নেবে এবং তা Google Chart এর DataTable ফরম্যাটে রূপান্তর করবে, যার পরে সেটি চার্টে রেন্ডার হবে।
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
DataTable এর সাথে আপনি ডেটা কাস্টমাইজ করতে পারেন। আপনি যদি ডেটার নতুন ভ্যালু বা কলাম যোগ করতে চান, তবে সেটা DataTable-এ যুক্ত করা যাবে। উদাহরণস্বরূপ:
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day', 'Percentage'],
['Work', 8, 40],
['Eat', 2, 10],
['Commute', 2, 10],
['Watch TV', 2, 10],
['Sleep', 8, 40]
]);
এখানে, আমরা একটি নতুন Percentage কলাম যুক্ত করেছি। এখন, আপনি এই নতুন কলামটিকে চার্টে প্রদর্শন করতে পারেন।
DataTable এবং arrayToDataTable ব্যবহার করে আপনি Google Charts-এ ডেটা কাস্টমাইজ এবং ফরম্যাট করতে পারবেন। arrayToDataTable ফাংশনটি অ্যারে ডেটাকে DataTable ফরম্যাটে রূপান্তর করার জন্য ব্যবহৃত হয় এবং এটি সহজেই Google Chart এ রেন্ডার করা যায়। এটি Google Charts API এর সাথে ডেটা ব্যবস্থাপনা সহজ করে তোলে এবং ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী করে।
Google Charts API-এ Chart Style এবং Layout Customization ব্যবহার করে আপনি চার্টের বিভিন্ন দিক কাস্টমাইজ করতে পারেন, যেমন রঙ, টাইটেল, অক্ষ (axis), লেজেন্ড, টুলটিপ, সাইজ এবং আরও অনেক কিছু। এই কাস্টমাইজেশনগুলি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী এবং আকর্ষণীয় করে তোলে।
Chart Style কাস্টমাইজেশন দ্বারা আপনি চার্টের বিভিন্ন উপাদান যেমন রঙ, ফন্ট, গ্রিডলাইন, অক্ষের স্টাইল ইত্যাদি কাস্টমাইজ করতে পারেন।
চার্টের টাইটেল পরিবর্তন করতে এবং সেটির স্টাইল কাস্টমাইজ করতে title অপশন ব্যবহার করা হয়।
chartOptions = {
title: 'My Daily Activities', // Title
titleTextStyle: {
color: 'blue', // Title text color
fontSize: 18, // Title text size
bold: true, // Title text weight
italic: true // Title text style
}
};
চার্টের আকার পরিবর্তন করতে আপনি width এবং height অপশন ব্যবহার করতে পারেন।
chartOptions = {
width: 600, // Chart width
height: 400 // Chart height
};
চার্টের লেজেন্ডের পজিশন এবং স্টাইল কাস্টমাইজ করতে legend অপশন ব্যবহার করা হয়।
chartOptions = {
legend: {
position: 'top', // Legend position: top, bottom, left, right
alignment: 'center', // Legend alignment: start, center, end
textStyle: {
color: 'black', // Legend text color
fontSize: 14, // Legend text size
fontName: 'Arial' // Legend text font
}
}
};
চার্টের বিভিন্ন উপাদানের রঙ কাস্টমাইজ করতে colors অপশন ব্যবহার করা হয়। এটি একাধিক রঙ গ্রহণ করতে পারে।
chartOptions = {
colors: ['#FF5733', '#33FF57', '#3357FF'] // Chart colors
};
চার্টের উপর হোভার করার সময় tooltip প্রদর্শিত হয়। টুলটিপের কন্টেন্ট এবং স্টাইল কাস্টমাইজ করা যায়।
chartOptions = {
tooltip: {
trigger: 'focus', // Tooltip trigger: focus, selection
isHtml: true, // Enable HTML in tooltip
textStyle: {
color: 'black',
fontSize: 14
}
}
};
hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করার মাধ্যমে আপনি অক্ষের টাইটেল, লেবেল, গ্রিডলাইন এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।
chartOptions = {
hAxis: {
title: 'Time', // Horizontal axis title
minValue: 0, // Minimum value for horizontal axis
textStyle: {
color: 'green', // Axis text color
fontSize: 12 // Axis text font size
},
gridlines: {
color: 'lightgrey', // Gridlines color
count: 5 // Number of gridlines
}
},
vAxis: {
title: 'Sales', // Vertical axis title
textStyle: {
color: 'red', // Axis text color
fontSize: 14 // Axis text font size
}
}
};
চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে backgroundColor অপশন ব্যবহার করা হয়।
chartOptions = {
backgroundColor: '#f2f2f2' // Background color of the chart
};
অনেক ধরনের চার্টে 3D ভিউ তৈরি করা যায়। যেমন, PieChart, ColumnChart, BarChart-এ 3D কাস্টমাইজেশন করা যেতে পারে।
chartOptions = {
is3D: true, // Enable 3D for the chart
view: { min: 0, max: 10 }
};
Chart Layout কাস্টমাইজেশন দ্বারা আপনি চার্টের আঙ্গিক, অক্ষের বিন্যাস, এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন।
গ্রিডলাইনগুলোকে কাস্টমাইজ করতে gridlines অপশন ব্যবহার করা হয়, যা চার্টের অক্ষের গ্রিডের জন্য উপযুক্ত।
chartOptions = {
hAxis: {
gridlines: {
count: 4, // Set the number of gridlines
color: '#e5e5e5', // Set gridline color
width: 0.5 // Set gridline width
}
},
vAxis: {
gridlines: {
color: '#e5e5e5',
width: 0.5
}
}
};
চার্টের টাইটেল এবং লেজেন্ডের পজিশন এবং এলাইনমেন্ট নিয়ন্ত্রণ করা যায়।
chartOptions = {
title: 'Sales Overview',
titlePosition: 'in', // 'in' or 'out' for title inside or outside the chart
titleTextStyle: {
fontSize: 16,
color: '#000',
bold: true
},
legend: {
position: 'bottom',
alignment: 'center' // Align legend text to center
}
};
নিচে একটি Pie Chart উদাহরণ দেওয়া হলো, যেখানে বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহৃত হয়েছে।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Customized Google Chart';
chartType = 'PieChart'; // Chart Type
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Chart Data
chartOptions = {
title: 'My Daily Activities', // Title
titleTextStyle: {
color: 'blue', // Title text color
fontSize: 18, // Title font size
bold: true // Title bold
},
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400,
colors: ['#FF5733', '#33FF57', '#3357FF'], // Custom Colors
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: 'black', // Legend text color
fontSize: 14 // Legend font size
}
},
tooltip: {
trigger: 'focus', // Tooltip trigger
isHtml: true, // Enable HTML in tooltip
textStyle: {
color: 'black',
fontSize: 14
}
}
};
}
HTML:
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
Google Charts API-তে Chart Style এবং Layout Customization আপনাকে আপনার চার্টকে কাস্টমাইজ করার পুরো স্বাধীনতা দেয়। আপনি title, legend, colors, axis, gridlines, এবং অন্যান্য অপশন কাস্টমাইজ করে চার্টের স্টাইল এবং লেআউট পরিবর্তন করতে পারেন। এই কাস্টমাইজেশন আপনার ডেটা ভিজুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
